$numbers: 0, 5, 10, 15, 20, 30;
@each $i in $numbers {
  .mg-#{$i} {
    margin: #{$i}px !important;
  }
  .mgt-#{$i} {
    margin-top: #{$i}px !important;
  }
  .mgr-#{$i} {
    margin-right: #{$i}px !important;
  }
  .mgb-#{$i} {
    margin-bottom: #{$i}px !important;
  }
  .mgl-#{$i} {
    margin-left: #{$i}px !important;
  }

  .pd-#{$i} {
    padding: #{$i}px !important;
  }
  .pdt-#{$i} {
    padding-top: #{$i}px !important;
  }
  .pdr-#{$i} {
    padding-right: #{$i}px !important;
  }
  .pdb-#{$i} {
    padding-bottom: #{$i}px !important;
  }
  .pdl-#{$i} {
    padding-left: #{$i}px !important;
  }
}

$position: left, center, right;
@each $i in $position {
  .align-#{$i} {
    text-align: #{$i};
  }
}

.text-hidden {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

$text-hidden-number: 2, 3;
@each $i in $text-hidden-number {
  .text-hidden-#{$i} {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $i;
    -webkit-box-orient: vertical;
  }
}
